<template>
  <div class="app-container">
    <div class="w-table">
      <!-- 筛选 -->
      <table-filter ref="filter" @save="filterChange" />

      <!-- 功能按钮 -->
      <div class="w-table-btn">
        <el-button icon="plus" plain type="primary" @click="add">
          新增班级
        </el-button>
      </div>

      <!-- 表格 -->
      <table-body
        ref="table"
        v-model:selection="selection"
        v-loading="loading"
        class="w-table-b"
        :list="list"
        @del="del"
        @detail="detail"
        @edit="edit"
        @sort-change="sortChange"
      />

      <!-- 翻页 -->
      <div class="w-table-f">
        <el-pagination
          v-model:current-page="queryData.pageNum"
          v-model:page-size="queryData.pageSize"
          background
          layout="total,->,prev, pager, next ,sizes ,jumper"
          :pager-count="5"
          :total="pageTotal"
          @current-change="request"
          @size-change="request"
        />
      </div>
    </div>

    <!-- 弹出窗 -->
    <table-edit ref="editDialog" @save="request" />
  </div>
</template>

<script>
  import $api from './api.js'
  import TableFilter from './filter.vue'
  import TableBody from './body.vue'
  import TableEdit from './edit.vue'

  export default {
    components: {
      TableFilter,
      TableBody,
      TableEdit,
    },

    data() {
      return {
        queryData: {
          pageNum: 1,
          pageSize: 10,
        },

        loading: false,
        pageTotal: 0,
        list: [],
        selection: [],
      }
    },

    mounted() {
      this.load()
    },

    methods: {
      load() {
        this.request()
      },

      request() {
        const sendData = {
          ...this.queryData,
        }
        this.loading = true
        $api
          .list(sendData)
          .then((res) => {
            this.list = res.rows
            this.pageTotal = res.total
          })
          .finally(() => {
            this.loading = false
          })
      },

      /**
       * 处理筛选条件变化的事件
       * @param {Object} d - 包含筛选条件变化的对象
       */
      filterChange(d) {
        // 将当前的查询数据与新的筛选条件合并
        this.queryData = {
          ...this.queryData,
          ...d,
        }

        // 重置页码为第一页
        this.queryData.pageNum = 1

        // 发起请求以获取新的列表数据
        this.request()
      },

      sortChange(d) {
        this.queryData = {
          ...this.queryData,
          ...d,
        }
        this.request()
      },

      add() {
        this.$refs.editDialog.load('add')
      },

      detail(d) {
        this.$refs.editDialog.load('detail', d)
      },

      edit(d) {
        this.$refs.editDialog.load('edit', d)
      },

      del(d) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this._del([d.id])
        })
      },

      delAll() {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const ids = this.selection.map((item) => {
            return item.id
          })
          _del(ids)
        })
      },

      _del(id) {
        const sendData = {
          id,
        }
        $api.delete(sendData).then((res) => {
          this.$message.success('删除成功!')
          this.load()
        })
      },

      treeChange(d, path) {
        console.log('🚀 ~ treeChange ~ path:', path)
        console.log('🚀 ~ treeChange ~ d:', d)
      },

      treeCheckChange({ nodes, keys }) {
        console.log('🚀 ~ treeCheckChange ~ nodes:', nodes)
        console.log('🚀 ~ treeCheckChange ~ keys:', keys)

        // keys ['1-2', '2-3', '2-14', '2-25', '2-32']
        // 数据结构特殊 key 是由type + id组成的
        // '0-0' 根 大学, '1-2'校区, '2-3' 楼宇
        // 绑定时 我们只关心绑定 楼宇
        // const ss = keys.filter((item) => {
        //   return item.indexOf('2-') > -1
        // })
        // building.value = ss
      },
    },
  }
</script>

<style lang="scss" scoped></style>
